<template>
	<view class="MoreActions" :style="'background: url('+ homebgc +') no-repeat center/cover'">
		<view class="top"></view>
		<view class="MoreActionsList" v-for="(item,index) in ActionsList" :key="index">
			<view v-if="item.title" class="title">{{item.title}}</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view class="MoreActionsBody" v-for="(i,x) in item.children" :key="x"
					@click="ChildrenList(i)">
					<view class="box" :class=" Actions.dance_action == i.dance_action?'active':''">
						 <!-- <i-icon ext-class="wh40 bg-t1 mr30" :src="i.dance_action_icon_url" :link="true" /> -->
						<svg-icon v-if="Actions.dance_action == i.dance_action" :iconUrl="Actions.dance_action_icon_url" :svgStyle="{ color: '#FFF' }" />
						
						<image v-else :src="i.dance_action_icon_url" style="width: 90rpx;height: 90rpx;" mode=""></image>
					</view>
					<text class="info">
						<text class="info-title">{{i.dance_action}}</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		import SvgIcon from "./Icon.vue"
	export default {
		components: {
			SvgIcon
		  },
		data() {
			return {
				homebgc:this.$websiteUrl + 'static/web_files/Home_bj.svg',
				Actions:{},
				ActionsList: [{
					title: '基本动作',
					children: [],
				}, ]
			}
		},
		mounted() {
			this.ActionsList[0].children = uni.getStorageSync('userAction');
		},
		methods: {
			ChildrenList(obj) {
				this.Actions = obj
				setTimeout(() => {
					const data = {
						...obj,
						index: 1
					}
					const objStr = encodeURIComponent(JSON.stringify(data))
					wx.reLaunch({
						url: `/pages/index/index?action=${objStr}`
					})
				}, 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.MoreActions {
		width: 100%;
		height: 100vh;
		padding: 0 48rpx;
		overflow-y: auto;

		.top {
			height: 176rpx;
		}

		.MoreActionsList {
			.title {
				padding: 48rpx 0 40rpx 0;
				font-weight: 500;
				font-size: 28rpx;
				color: #2D3142;
				line-height: 40rpx;
			}

			.MoreActionsBody {
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				margin-right: 47rpx;

				.box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 128rpx;
					height: 128rpx;
					margin-bottom: 16rpx;
					background: #fff;
					box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(112, 136, 210, 0.1);
					border-radius: 40rpx;
				}

				.active {
					background: #7265E3;
				}

				.info {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 125rpx;
					margin-bottom: 32rpx;

					.info-title{
						font-size: 16rpx;
						 overflow: hidden; 		
						  text-overflow: ellipsis;
						  width: 110%;
						  display: -webkit-box;
						  -webkit-box-orient: vertical;
						  -webkit-line-clamp: 1;
						  word-break: break-all;	
						
					}
				}
			}

			.MoreActionsBody:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
</style>